<template>
  增删改查的演示
  <hr>
  <!--查询控件 延迟加载-->
  <div style="height: 65px;">
    <component
      :is="delay[delayKind.find]"
      :active="active"
      :moduleId="moduleId"
    >
    </component>
  </div>
  <!--操作按钮 延迟加载-->
  <div style="height: 30px;">
    <component
      :is="delay[delayKind.button]"
      :active="active"
      :selection="selection"
      :moduleId="moduleId"
    >
    </component>
  </div>
  <!--列表控件-->
  <my-grid
    :active="active"
    :moduleId="moduleId"
    :selection="selection"
    :pageInfo="pageInfo"
  >
  </my-grid>
  <!--分页-->
  <my-pager
    :pageInfo="pageInfo"
    :active="active"
  >
  </my-pager>
 
</template>

<script>
  import { reactive, nextTick, defineAsyncComponent } from 'vue'
  import { lifecycle } from '/nf-ui-core'
  import { loading } from '/nf-ui-elp'
  import { logTime } from '@naturefw/nf-tool'
  import _formMeta from '../form/form.json'
  import useActive from '../activation.js'

  // 加载组件
  import myPager from './components/pager.vue'
  import myGrid from './components/grid.vue'
  // import myFind from './components/find.vue'
  // import myButton from './components/button.vue'

</script>

<script setup>
  lifecycle('增删改查2', true)
  // loading()

  const t = logTime('加载时间')

  nextTick(() => {
    // Loading should be closed asynchronously
    // t.end()
  })

  const moduleId = new Date().valueOf()

  // 当前激活的模块
  const { active } = useActive(moduleId)
  
  // 列表里选择的记录
  const selection = reactive({
    dataId: '', // 单选ID number 、string
    row: {}, // 单选的数据对象 {}
    dataIds: [], // 多选ID []
    rows: [] // 多选的数据对象 []
  }) 

  // 分页信息
  const pageInfo = reactive({
    pageSize: 10,
    count: 20, // 总数
    pageIndex: 1 // 当前页号
  })

  // 延迟加载
  const delay = {
    load: '',
    find: defineAsyncComponent(() => import('./components/find.vue')),
    button: defineAsyncComponent(() => import('./components/button.vue'))
  }
  const delayKind = reactive({
    find: 'load',
    button: 'load'
  })

  setTimeout(() => {
    delayKind.find = 'find'
    delayKind.button = 'button'
  }, 1)

</script>